---
title: Sidebar
description: A composable, themeable and customizable sidebar component. Created by Shadcn and animated by Animate UI.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="demo-components-radix-sidebar" iframe bigScreen />

## Installation

<ComponentInstallation name="components-radix-sidebar" />

## Usage

```tsx
<SidebarProvider>
  <Sidebar>
    <SidebarHeader>
      <SidebarMenu>
        <SidebarMenuItem>Item 1</SidebarMenuItem>
        <SidebarMenuItem>Item 2</SidebarMenuItem>
        <SidebarMenuItem>Item 3</SidebarMenuItem>
      </SidebarMenu>
    </SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Label 1</SidebarGroupLabel>
        <SidebarMenu>
          <SidebarMenuItem>Item 1</SidebarMenuItem>
          <SidebarMenuItem>Item 2</SidebarMenuItem>
          <SidebarMenuItem>Item 3</SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroup>
      <SidebarGroup>
        <SidebarGroupLabel>Label 2</SidebarGroupLabel>
        <SidebarMenu>
          <SidebarMenuItem>Item 1</SidebarMenuItem>
          <SidebarMenuItem>Item 2</SidebarMenuItem>
          <SidebarMenuItem>Item 3</SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroup>
    </SidebarContent>
    <SidebarFooter>
      <SidebarMenu>
        <SidebarMenuItem>Item 1</SidebarMenuItem>
        <SidebarMenuItem>Item 2</SidebarMenuItem>
        <SidebarMenuItem>Item 3</SidebarMenuItem>
      </SidebarMenu>
    </SidebarFooter>
    <SidebarRail />
  </Sidebar>
  <SidebarInset>
    <SidebarTrigger />
    {...}
  </SidebarInset>
</SidebarProvider>
```

## API Reference

### SidebarProvider

<div className="flex flex-col gap-2">
  <ExternalLink
    href="https://ui.shadcn.com/docs/components/sidebar#sidebarprovider"
    text="Shadcn UI API Reference - SidebarProvider"
  />
</div>

### Sidebar

<div className="flex flex-col gap-2">
  <ExternalLink
    href="https://ui.shadcn.com/docs/components/sidebar#sidebar"
    text="Shadcn UI API Reference - Sidebar"
  />
</div>

### useSidebar

<div className="flex flex-col gap-2">
  <ExternalLink
    href="https://ui.shadcn.com/docs/components/sidebar#usesidebar"
    text="Shadcn UI API Reference - useSidebar"
  />
</div>

### SidebarHeader

<div className="flex flex-col gap-2">
  <ExternalLink
    href="https://ui.shadcn.com/docs/components/sidebar#sidebarheader"
    text="Shadcn UI API Reference - SidebarHeader"
  />
</div>

### SidebarFooter

<div className="flex flex-col gap-2">
  <ExternalLink
    href="https://ui.shadcn.com/docs/components/sidebar#sidebarfooter"
    text="Shadcn UI API Reference - SidebarFooter"
  />
</div>

### SidebarContent

<div className="flex flex-col gap-2">
  <ExternalLink
    href="https://ui.shadcn.com/docs/components/sidebar#sidebarcontent"
    text="Shadcn UI API Reference - SidebarContent"
  />
</div>

### SidebarGroup

<div className="flex flex-col gap-2">
  <ExternalLink
    href="https://ui.shadcn.com/docs/components/sidebar#sidebargroup"
    text="Shadcn UI API Reference - SidebarGroup"
  />
</div>

### Collapsible SidebarGroup

<div className="flex flex-col gap-2">
  <ExternalLink
    href="https://ui.shadcn.com/docs/components/sidebar#collapsible-sidebargroup"
    text="Shadcn UI API Reference - Collapsible SidebarGroup"
  />
</div>

### SidebarGroupAction

<div className="flex flex-col gap-2">
  <ExternalLink
    href="https://ui.shadcn.com/docs/components/sidebar#sidebargroupaction"
    text="Shadcn UI API Reference - SidebarGroupAction"
  />
</div>

### SidebarMenu

<div className="flex flex-col gap-2">
  <ExternalLink
    href="https://ui.shadcn.com/docs/components/sidebar#sidebarmenu"
    text="Shadcn UI API Reference - SidebarMenu"
  />
</div>

### SidebarMenuButton

<div className="flex flex-col gap-2">
  <ExternalLink
    href="https://ui.shadcn.com/docs/components/sidebar#sidemenubutton"
    text="Shadcn UI API Reference - SidebarMenuButton"
  />
</div>

### SidebarMenuAction

<div className="flex flex-col gap-2">
  <ExternalLink
    href="https://ui.shadcn.com/docs/components/sidebar#sidemenuaction"
    text="Shadcn UI API Reference - SidebarMenuAction"
  />
</div>

### SidebarMenuSub

<div className="flex flex-col gap-2">
  <ExternalLink
    href="https://ui.shadcn.com/docs/components/sidebar#sidemenusub"
    text="Shadcn UI API Reference - SidebarMenuSub"
  />
</div>

### Collapsible SidebarMenu

<div className="flex flex-col gap-2">
  <ExternalLink
    href="https://ui.shadcn.com/docs/components/sidebar#collapsible-sidemenusub"
    text="Shadcn UI API Reference - Collapsible SidebarMenuSub"
  />
</div>

### SidebarMenuBadge

<div className="flex flex-col gap-2">
  <ExternalLink
    href="https://ui.shadcn.com/docs/components/sidebar#sidemenubadge"
    text="Shadcn UI API Reference - SidebarMenuBadge"
  />
</div>

### SidebarMenuSkeleton

<div className="flex flex-col gap-2">
  <ExternalLink
    href="https://ui.shadcn.com/docs/components/sidebar#sidemenuskeleton"
    text="Shadcn UI API Reference - SidebarMenuSkeleton"
  />
</div>

### SidebarSeparator

<div className="flex flex-col gap-2">
  <ExternalLink
    href="https://ui.shadcn.com/docs/components/sidebar#sidemenu"
    text="Shadcn UI API Reference - SidebarMenu"
  />
</div>

### SidebarTrigger

<div className="flex flex-col gap-2">
  <ExternalLink
    href="https://ui.shadcn.com/docs/components/sidebar#sidetrigger"
    text="Shadcn UI API Reference - SidebarTrigger"
  />
</div>

### SidebarRail

<div className="flex flex-col gap-2">
  <ExternalLink
    href="https://ui.shadcn.com/docs/components/sidebar#sidebarrail"
    text="Shadcn UI API Reference - SidebarRail"
  />
</div>

## Credits

- Credit to [shadcn/ui](https://ui.shadcn.com/docs/components/sidebar) for the sidebar component.
